<template>
  <div class="layout">
    <div>
      
      <div class='title'> <div><img class="imgs" src="../../assets/images/logo_top.jpg" /></div>广西科技师范学院农业大数据监控平台</div>
    </div>
    
    <Row>
      <i-col span="4">
        <Menu  theme="light" active-name="1" @on-select="onMenuSelect">
          <div class="layout-nav">
              <Menu-item name="1">
                <Card shadow :padding='0'>
                  <div class='leftMenu'>
                    <div class='imgBox'><img :src="farm5" style='width:100%;height:100%'></div>
                    <h3 class='bottomTitle'>广西省农业大数据监测</h3>
                  </div>
                </Card>
              </Menu-item>
              <Menu-item name="2">
                <Card shadow :padding='0'>
                  <div class='leftMenu'>
                    <h3 class='bottomTitle'>来宾华侨农场</h3>
                    <div class='imgBox'><img :src="farm2" style='width:100%;height:100%'></div>
                    <img class='play' :src="play">
                  </div>
                </Card>
              </Menu-item>
              <Menu-item name="3">
                <Card shadow :padding='0'>
                  <div class='leftMenu'>
                    <h3 class='bottomTitle'>果农宝农业示范基地</h3>
                    <div class='imgBox'><img :src="farm3" style='width:100%;height:100%'></div>
                    <img class='play' :src="play">
                  </div>
                </Card>
              </Menu-item>
              <Menu-item name="4">
                  <Card shadow :padding='0'>
                  <div class='leftMenu'>
                    <Icon type="ios-add-circle-outline" size='60' style='margin-top:40px;'/>
                    <h3 style='margin-top:40px'>添加</h3>
                  </div>
                </Card>
              </Menu-item>
          </div>
        </Menu>
      </i-col>
      <i-col span="8">
        <Card shadow v-if='MenuId==1'>
          <chart-map style="height: 480px;" text="map"></chart-map>
        </Card>
        <div v-else-if='MenuId==2' id="video">
          <div class='videoTitle'>来宾华侨农场实时监控</div>
          <object pluginspage="http://www.macromedia.com/go/getflashplayer" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=11,3,0,0" width="800px" height="450px" id="myPlayerflashId" name="myPlayerflashId" align="middle"><param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true"><param name="quality" value="high"><param name="bgcolor" value="#FFF"><param name="wmode" value="transparent"><param name="movie" value="https://open.ys7.com/sdk/js/1.4/ckplayer/ckplayer.swf"><param name="flashvars" value="s=4&amp;f=https://open.ys7.com/sdk/js/1.4/ckplayer/m3u8.swf&amp;a=http://hls.open.ys7.com/openlive/9d249a00c4de4bcc995c1bbc0c3e650b.hd.m3u8&amp;c=0&amp;lv=1&amp;p=1&amp;i=https://open.ys7.com/console/setnormallive.html?serial=C29134398&amp;channelNo=1&amp;loaded=loadHandler"><embed allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#FFF" wmode="transparent" src="https://open.ys7.com/sdk/js/1.4/ckplayer/ckplayer.swf" flashvars="s=4&amp;f=https://open.ys7.com/sdk/js/1.4/ckplayer/m3u8.swf&amp;a=http://hls.open.ys7.com/openlive/9d249a00c4de4bcc995c1bbc0c3e650b.hd.m3u8&amp;c=0&amp;lv=1&amp;p=1&amp;i=https://open.ys7.com/console/setnormallive.html?serial=C29134398&amp;channelNo=1&amp;loaded=loadHandler" width="100%" height="412px" name="myPlayerflashId" id="myPlayerflashId" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></object>         </div>
        <div v-else-if='MenuId==3' id="video">
          <div class='videoTitle'>果农宝农业示范基地实时监控</div>
          <object pluginspage="http://www.macromedia.com/go/getflashplayer" 
          classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
          codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=11,3,0,0" 
          width="1200px" height="600px" id="myPlayerflashId" name="myPlayerflashId" align="middle">
          <param name="allowScriptAccess" value="always"><param name="allowFullScreen" value="true">
          <param name="quality" value="high"><param name="bgcolor" value="#FFF">
          <param name="wmode" value="transparent"><param name="movie" value="https://open.ys7.com/sdk/js/1.3/ckplayer/ckplayer.swf">
          <param name="flashvars" value="f=rtmp://rtmp.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b&amp;c=0&amp;p=1&amp;i=https://open.ys7.com/sdk/js/1.3/demo.html&amp;lv=1&amp;loaded=loadHandler"><embed allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#FFF" wmode="transparent" src="https://open.ys7.com/sdk/js/1.3/ckplayer/ckplayer.swf" flashvars="f=rtmp://rtmp.open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b&amp;c=0&amp;p=1&amp;i=https://open.ys7.com/sdk/js/1.3/demo.html&amp;lv=1&amp;loaded=loadHandler" width="100%" height="412px" name="myPlayerflashId" id="myPlayerflashId" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></object>
        </div>
        <Card shadow v-else>
          <chart-map style="height: 480px;" text="map"></chart-map>
        </Card>
        <div>
          <i-col span="8">
            <chart-small-gauge style="height: 220px;" :gaugeData='gaugeData1' :max='100' dataFormatter='%' text="砂糖橘生长指数" titleY='bottom'></chart-small-gauge>
          </i-col>
          <i-col span="8">
            <chart-small-gauge style="height: 220px;" :gaugeData='gaugeData2' :max='100' dataFormatter='%' text="火龙果生长指数" titleY='bottom'></chart-small-gauge>
          </i-col>
          <i-col span="8">
            <chart-small-gauge style="height: 220px;" :gaugeData='gaugeData3' :max='100' dataFormatter='%' text="户外劳动指数" titleY='bottom'></chart-small-gauge>
          </i-col>
        </div>
      </i-col>
      <i-col span="12">
        <div>
          <i-col span="6">
             <chart-cirque style="height: 150px;" :value='circleData1' :max='100' text='℃'></chart-cirque>
             <div class="chart-title">大气温度</div>
          </i-col>
          <i-col span="18">
            <chart-line-no-scroll-x style="height: 150px;" :value="lineData" :max='45' :min='20'></chart-line-no-scroll-x>
          </i-col>
        </div>
        <div style='margin-top:30px;'>
          <i-col span="6">
             <chart-cirque style="height: 150px;" :value='circleData2' :max='100' text="mm" ></chart-cirque>
             <div class="chart-title">降雨量</div>
          </i-col>
          <i-col span="18">
            <chart-bar style="height:150px;" :value="barData" />
          </i-col>
        </div>
        <div style='margin-top:30px;'>
          <i-col span="6">
            <chart-cirque style="height: 150px;" :value='circleData3' :max='2000' text=""></chart-cirque>
            <div class="chart-title">蒸发量</div>
          </i-col>
          <i-col span="18">
            <chart-line-no-scroll-x style="height: 150px;" :value="lineData" :max='45' :min='20'></chart-line-no-scroll-x>
          </i-col>
        </div>
        <div style='margin-top:30px;'>
          <i-col span="6">
             <chart-cirque style="height: 150px;" :value='circleData4' :max='100' text='%'></chart-cirque>
             <div class="chart-title">土壤湿度</div>
          </i-col>
          <i-col span="18">
            <chart-line-no-scroll-x style="height: 150px;" :value="lineData" :max='45' :min='20'></chart-line-no-scroll-x>
          </i-col>
        </div>
        <div style='margin-top:30px;'>
          <i-col span="6">
            <chart-cirque style="height: 150px;" :value='circleData5' :max='1200' text="hP"></chart-cirque>
            <div class="chart-title">大气压</div>
          </i-col>
          <i-col span="18">
            <chart-line-no-scroll-x style="height: 150px;" :value="lineData" :max='45' :min='20'></chart-line-no-scroll-x>
          </i-col>
        </div>
      </i-col>
      <i-col span="24">
         <chart-line-scatter style="height: 250px;" :value="lineScatterData" text="" :max='0' :min='24'></chart-line-scatter>
      </i-col>
    </Row>
  </div>
</template>
<script>
import farm2 from '@/assets/images/farm2.jpg'
import farm3 from '@/assets/images/farm3.jpg'
import farm5 from '@/assets/images/farm5.jpg'
import play from '@/assets/images/play.png'
import { ChartMap, ChartLine, ChartLineScatter, ChartLineNoScrollX, ChartSmallGauge, ChartBar, ChartCirque} from '_c/charts'
export default {
  name: 'monitorPlatform',
  components: {
    ChartMap,
    ChartLine,
    ChartSmallGauge,
    ChartBar,
    ChartCirque,
    ChartLineScatter,
    ChartLineNoScrollX,
    farm2,
    farm3,
    farm5,
    play
  },
  data () {
    return {
      farm2,
      farm3,
      farm5,
      play,
      MenuId: 1,
      lineData: [
        {value: 31.5, time: '2017-8-1'},
        {value: 33.1, time: '2017-8-2'},
        {value: 30.6, time: '2017-8-3'},
        {value: 31.2, time: '2017-8-4'},
        {value: 35.0, time: '2017-8-5'},
        {value: 33.5, time: '2017-8-6'},
        {value: 31.4, time: '2017-8-7'},
        {value: 37.6, time: '2017-8-8'},
        {value: 30.5, time: '2017-8-9'},
        {value: 32.0, time: '2017-8-10'},
        {value: 25.5, time: '2017-8-11'},
        {value: 31.1, time: '2017-8-12'},
        {value: 26.4, time: '2017-8-13'},
        {value: 32.2, time: '2017-8-14'},
        {value: 32.0, time: '2017-8-15'},
        {value: 31.5, time: '2017-8-16'},
        {value: 28.1, time: '2017-8-17'},
        {value: 30.6, time: '2017-8-18'},
        {value: 36.2, time: '2017-8-19'},
        {value: 34.0, time: '2017-8-20'},
        {value: 31.5, time: '2017-8-21'},
        {value: 37.1, time: '2017-8-22'},
        {value: 30.6, time: '2017-8-23'},
        {value: 34.2, time: '2017-8-24'},
        {value: 31.0, time: '2017-8-25'},
        {value: 28.5, time: '2017-8-26'},
        {value: 34.1, time: '2017-8-27'},
        {value: 32.0, time: '2017-8-28'},
        {value: 25.8, time: '2017-8-29'},
        {value: 30.6, time: '2017-8-30'},
        {value: 36.2, time: '2017-8-31'}
      ],
      barData: {
        '2017-8-1': 13253,
        '2017-8-2': 34235,
        '2017-8-3': 26321,
        '2017-8-4': 12340,
        '2017-8-5': 8643,
        '2017-8-6': 4322,
        '2017-8-7': 5324,
        '2017-8-8': 13253,
        '2017-8-9': 34235,
        '2017-8-10': 26321,
        '2017-8-11': 13253,
        '2017-8-12': 34235,
        '2017-8-13': 26321,
        '2017-8-14': 12340,
        '2017-8-15': 8643,
        '2017-8-16': 4322,
        '2017-8-17': 5324,
        '2017-8-18': 3253,
        '2017-8-19': 4235,
        '2017-8-20': 6321,
        '2017-8-21': 3253,
        '2017-8-22': 4235,
        '2017-8-23': 6321,
        '2017-8-24': 2340,
        '2017-8-25': 8643,
        '2017-8-26': 4322,
        '2017-8-27': 5324,
        '2017-8-28': 13253,
        '2017-8-29': 34235,
        '2017-8-30': 26321,
        '2017-8-31': 26321
      },
      lineScatterData: [
        {
          value: 23,
          time: '2017-8-1',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '21'
          }, {
            type: '2',
            title: 'bug2',
            hour: '11'
          }]
        }, {
          value: 26.2,
          time: '2017-8-2',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '10'
          }, {
            type: '2',
            title: 'bug2',
            hour: '13'
          }]
        },
        {
          value: 30,
          time: '2017-8-3',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '6'
          }, {
            type: '2',
            title: 'bug2',
            hour: '16'
          }]
        }, {
          value: 28,
          time: '2017-8-4',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '10'
          }, {
            type: '2',
            title: 'bug2',
            hour: '13'
          }]
        },
        {
          value: 27.4,
          time: '2017-8-5',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '10'
          }, {
            type: '2',
            title: 'bug2',
            hour: '14'
          }]
        }, {
          value: 29.2,
          time: '2017-8-6',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '18'
          }, {
            type: '2',
            title: 'bug2',
            hour: '2'
          }]
        },
        {
          value: 30.2,
          time: '2017-8-7',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '18'
          }, {
            type: '2',
            title: 'bug2',
            hour: '14'
          }]
        }, {
          value: 30.4,
          time: '2017-8-8',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '15'
          }, {
            type: '2',
            title: 'bug2',
            hour: '3'
          }]
        },
        {
          value: 29.8,
          time: '2017-8-9',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '16'
          }, {
            type: '2',
            title: 'bug2',
            hour: '1'
          }]
        }, {
          value: 27,
          time: '2017-8-10',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '1'
          }, {
            type: '2',
            title: 'bug2',
            hour: '15'
          }]
        },
        {
          value: 26.7,
          time: '2017-8-11',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '12'
          }, {
            type: '2',
            title: 'bug2',
            hour: '9'
          }]
        }, {
          value: 25,
          time: '2017-8-12',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '5'
          }, {
            type: '2',
            title: 'bug2',
            hour: '18'
          }]
        },
        {
          value: 28,
          time: '2017-8-13',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '12'
          }, {
            type: '2',
            title: 'bug2',
            hour: '11'
          }]
        }, {
          value: 29,
          time: '2017-8-14',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '4'
          }, {
            type: '2',
            title: 'bug2',
            hour: '16'
          }]
        },
        {
          value: 30.5,
          time: '2017-8-15',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '4'
          }, {
            type: '2',
            title: 'bug2',
            hour: '11'
          }]
        }, {
          value: 31,
          time: '2017-8-16',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '9'
          }, {
            type: '2',
            title: 'bug2',
            hour: '23'
          }]
        },
        {
          value: 31.6,
          time: '2017-8-17',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '19'
          }, {
            type: '2',
            title: 'bug2',
            hour: '5'
          }]
        }, {
          value: 32,
          time: '2017-8-18',
          data: [{
            type: '1',
            title: 'bug1',
            hour: '15'
          }, {
            type: '2',
            title: 'bug2',
            hour: '19'
          }]
        }

      ],
      circleData1:23.8,//温度
      circleData2:30,//降雨量
      circleData3:200,//光照
      circleData4:48,//温度
      circleData5:991,//大气压
      gaugeData1:68,//砂糖橘
      gaugeData2:55,//红尤果
      gaugeData3:75,//农民劳动指数
    }
  },
  mounted () {

  },
   watch: {
    '$store.state.mapName': function () {
      var mapName = this.$store.state.mapName;
      console.log(mapName)
      this.changeData()
    }
  },
  methods: {
    onMenuSelect: function (name) {
      console.log(name, ' is clicked!')
      this.MenuId = name
    },
    changeData:function(){
      for(var i=0;i<this.lineData.length;i++){
        this.lineData[i].value=Math.floor(Math.random() * (35-25+1)) +25+Math.floor(Math.random() * 10)/10;
      }
      this.circleData1=Math.floor(Math.random() * 10) +30+Math.floor(Math.random() * 10)/10;
      this.circleData2=Math.floor(Math.random() * 100);
      this.circleData3=Math.floor(Math.random() * 2000);
      this.circleData4=Math.floor(Math.random() * 100);
      this.circleData5=Math.floor(Math.random() * 1200);
      this.gaugeData1=Math.floor(Math.random() * 100);
      this.gaugeData2=Math.floor(Math.random() * 100);
      this.gaugeData3=Math.floor(Math.random() * 100);
      for(var i=0;i<this.lineScatterData.length;i++){
        this.lineScatterData[i].value=Math.floor(Math.random() * (35-25+1)) +25+Math.floor(Math.random() * 10)/10;
        this.lineScatterData[i].data[0].hour=Math.floor(Math.random() * 25);
        this.lineScatterData[i].data[1].hour=Math.floor(Math.random() * 25);
      }
    },
  }
}
</script>
<style>
  .title{
    display: flex;
    justify-content:center;
    align-items:center;
    border-bottom: 1px solid #ccc;
    font-size:42px;
    text-align: center;
    font-weight: bold;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    
  }
  .imgs{
      width: 60px;
      margin-right: 20px;
      margin-top: 20px;
    }
  .leftMenu{
    text-align:center;
    height:160px;
    position: relative;
  }
  .leftMenu h3{
    line-height:160px;
    position: absolute;
    top:0;
    width:100%;
    text-align: center;
    z-index:99
  }
  .leftMenu .bottomTitle{
    top: 125px;
    height: 35px;
    line-height: 35px;
    background: rgba(0,0,0,.4);
    color: #fff;
  }
  .imgBox{
    opacity: 0.8;
    height:160px;
    width:100%;
    position: absolute;
    top:0
  }
  .play{
    position: absolute;
    width:50px;
    height:50px;
    left:50%;
    top:50%;
    margin-left:-25px;
    margin-top:-25px;
  }
  .videoTitle{
    height: 100px;
    line-height: 100px;
    font-size: 30px;
    text-align: center;
  }
  .chart-title{
    display:block;
    position: absolute;
    margin-top: -20px;
    left:50%;
    margin-left:-25px;
  }
</style>
